<template>
  <div>
    <el-divider content-position="left">Tag</el-divider>
    <el-row>
      <el-tag>标签一</el-tag>
      <el-tag type="success">标签二</el-tag>
      <el-tag type="info">标签三</el-tag>
      <el-tag type="warning">标签四</el-tag>
      <el-tag type="danger">标签五</el-tag>

      <el-tag
        v-for="item in tags"
        :key="`b-${item.name}`"
        closable
        :type="item.type">
        {{item.name}}
      </el-tag>

      <el-tag
        v-for="item in tags"
        :key="`a-${item.name}`"
        :type="item.type"
        effect="dark">
        {{ item.name }}
      </el-tag>

      <el-tag
        v-for="item in tags"
        :key="`c-${item.name}`"
        :type="item.type"
        effect="plain">
        {{ item.name }}
      </el-tag>
    </el-row>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        tags: [
          {
            name: '标签一',
            type: ''
          },
          {
            name: '标签二',
            type: 'success'
          },
          {
            name: '标签三',
            type: 'info'
          },
          {
            name: '标签四',
            type: 'warning'
          },
          {
            name: '标签五',
            type: 'danger'
          }
        ]
      };
    }
  }
</script>

<style lang="scss" scoped>
  .el-tag {
    margin-bottom: 5px;
  }
</style>
